<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.25" charset="UTF-8">
    <title>Title</title>
    <link rel="StyleSheet" href="../css/jpetstore.css" type="text/css" media="screen"/>
    <style>
        .dropdown{
            position:relative;
            display: inline-block;
            width: 300px;
        }
        .dropdown_content{
            display: none;
            background-color: lemonchiffon;
            padding:20px;
            border: 1px solid #ddd;
            box-shadow: 0 8px 16px 0 rgb(100, 123, 65);
        }
        .show{
            display: block;
        }
    </style>
</head>

<body>
<div th:replace="common/top"></div>

<div id="Catalog">
    <form th:action="@{registerForm}" method="post">

        <!-- 错误消息显示 -->
        <div th:if="${error}">
            <p><span style="color: #f1aa14;" th:text="${error}"></span></p>
        </div>

        <h3>User Information</h3>
        <table>
            <tr>
                <td>User ID:</td>
                <td>
                    <input type="text" name="username"/>
                </td>
            </tr>

            <tr>
                <td>New password:</td>
                <td>
                    <input type="password" name="password"/>
                </td>
            </tr>

            <tr>
                <td>Repeat password:</td>
                <td>
                    <input type="password" name="repeatedPassword" />
                </td>
            </tr>

            <tr>
                <td>
                    验证码:
                </td>
                <td>
                    <input type="text" name="captcha" id="captcha" required
                           placeholder="输入验证码" style="width: 100px;">
                    <img id="captchaImg"  th:src="@{catalog/captcha}"
                         onclick="refreshCaptcha()"
                         style="cursor: pointer; vertical-align: middle; margin-left: 10px;"
                         title="点击刷新验证码">
                </td>
            </tr>f
        </table>

        <div class="dropdown">
            <button class="dropdown-btn" onclick="toggleForm()">填写个人信息 ▼</button>
            <div class="dropdown_content" id="myDropdown">

                <div class="form-group">
                    <label>First Name:</label>
                    <input type="text" name="firstname" required>
                </div>

                <div class="form-group">
                    <label>Last Name:</label>
                    <input type="text" name="lastname" required>
                </div>

                <div class="form-group">Status:</div>
                <div class="form-group">
                    <label>OK</label>
                    <input type="radio" name="status" value="OK" required >
                </div>
                <div class="form-group">
                    <label>NO</label>
                    <input type="radio" name="status" value="No" required>
                </div>

                <div class="form-group">
                    <label>Addr1:</label>
                    <input type="text" name="addr1" required>
                </div>

                <div class="form-group">
                    <label>Addr2:</label>
                    <input type="text" name="addr2" required>
                </div>

                <div class="form-group">
                    <label>City:</label>
                    <input type="text" name="city" required>
                </div>

                <div class="form-group">
                    <label>State:</label>
                    <input type="text" name="state" required>
                </div>

                <div class="form-group">
                    <label>Zip:</label>
                    <input type="zip" name="zip" required>
                </div>

                <div class="form-group">
                    <label>Email:</label>
                    <input type="email" name="email" required>
                </div>

                <div class="form-group">
                    <label>Country:</label>
                    <input type="text" name="country" required>
                </div>
                
                <div class="form-group">
                    <label>Language:</label>
                    <select name="langpref" id="langpref">
                        <option value="Chinese" name="Chinese">中文</option>
                        <option value="English" name="English">English</option>
                    </select>
                </div>
                
                <div class="form-group">
                    <label>Phone:</label>
                    <input type="tel" name="phone" required>
                </div>

                <div class="form-group">
                    <label>Integer:</label>
                    <input type="text" name="integer" required>
                </div>

                <div class="form-group">
                    <label>MyFavoriteCategory:</label>
                    <select name="langpref" id="favouriteCategoryId">
                        <option value="DOGS" name="DOGS">Dog</option>
                        <option value="CATS" name="CATS">Cat</option>
                    </select>
                </div>

            </div>
        </div>
        <input type="submit" name="newAccount" value="Save Account Information" />
    </form>
</div>


<div th:replace="common/bottom"></div>


<!--脚本-->
<script>
    function refreshCaptcha() {
        var img = document.getElementById("captchaImg");
        // 获取当前 src（去掉已有的参数）
        var baseUrl = img.src.split('?')[0];
        // 添加时间戳参数避免缓存
        img.src = baseUrl + "?t=" + new Date().getTime();
    }
</script>
<script>
    //动态清空网页
    window.onload=function () {
        document.getElementById("username").value="";
        document.getElementById("password").value="";
    }
</script>
<script>
    function toggleForm(){
        const dropdown=document.getElementById("myDropdown");
        dropdown.classList.toggle("show");
    }
</script>
<script th:src="@{/js/background.js}" count="500"></script>
</body>
</html>